<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
            <title>Cindy JS</title>
            <script type="text/javascript" src="../build/js/Cindy.js"></script>
            <link rel="stylesheet" href="../css/cindy.css">


            </head>

	<body style="font-family:Arial;">

        <h1>CindyJS: 2D Lagrange Interpolation</h1>


        <script id='csmove' type='text/x-cindyscript'>
            drawimage(D,E,G,"bild",alpha->.2);
          //  A=A.xy;
          //  B=B.xy;
            aa=complex(A);
            bb=complex(B);
            dd=bb-aa;
            ff=3/4*dd-1/4*sqrt(3)*dd*i+aa;
            F=gauss(ff);
            l1=join(A,F);
            l2=join(A,B);
            l3=join(B,F);

            path=(A.xy,B.xy,F);

            t1=linereflect(l1);
            t2=linereflect(l2);
            t3=linereflect(l3);

            f(p,m):=m*(p++[1]);
            id=((1,0,0),(0,1,0),(0,0,1));

            AA=A.xy;
            BB=B.xy;

            drawme(m):=(
                        gsave();
                        clip(polygon((f(AA,m),f(BB,m),f(F,m))));
                        drawimage(f(D.xy,m),f(E.xy,m),f(G.xy,m),"bild",alpha->1);
                        grestore();
                        draw(f(AA,m),f(BB,m),size->3,color->(0,0,0));
                        draw(f(BB,m),f(F,m),size->3,color->(0,0,0));
                        draw(f(AA,m),f(F,m),size->3,color->(0,0,0));
                        );



            list=(
                  id,
                  t1,
                  t2,
                  t1*t2,
                  t1*t2*t1,
                  t1*t2*t1*t2,
                  t1*t2*t1*t2*t1,
                  t1*t2*t1*t2*t1*t2,
                  t1*t2*t1*t2*t1*t2*t1,
                  t1*t2*t1*t2*t1*t2*t1*t2,
                  t1*t2*t1*t2*t1*t2*t1*t2*t1,
                  t1*t2*t1*t2*t1*t2*t1*t2*t1*t2,

                  t3,
                  t1*t3,
                  t2*t3,
                  t1*t2*t3,
                  t1*t2*t1*t3,
                  t1*t2*t1*t2*t3,
                  t1*t2*t1*t2*t1*t3,
                  t1*t2*t1*t2*t1*t2*t3,
                  t1*t2*t1*t2*t1*t2*t1*t3,
                  t1*t2*t1*t2*t1*t2*t1*t2*t3,
                  t1*t2*t1*t2*t1*t2*t1*t2*t1*t3,
                  t1*t2*t1*t2*t1*t2*t1*t2*t1*t2*t3


                  );
            forall(list,m,   drawme(m);  );
            draw(A,B,color->(1,1,1),size->2 );
            draw(A,F,color->(1,1,1),size->2);
            draw(F,B,color->(1,1,1),size->2);

        </script>


        <div  id="CSCanvas" style="width:500px; height:500px; border:2px solid #000000"></div>

        <script type="text/javascript">

            var gslp=[

                      {name:"A", type:"Free", pos:[1.9,.5],color:[1,1,1]},
                      {name:"B", type:"Free", pos:[-3.6,1],color:[1,1,1]},
                      {name:"D", type:"Free", pos:[-6.5,-7],color:[1,1,1],color:[1,.7,0],size:3},
                      {name:"E", type:"Free", pos:[-5,7.5],color:[1,1,1],color:[1,.7,0],size:3},
                      {name:"G", type:"Free", pos:[7.5,-7.5],color:[1,1,1],color:[1,.7,0],size:3},
                                           ];
            CindyJS({canvasname:"CSCanvas",
                        movescript:"csmove",
                        geometry:gslp,
                        images:{bild:"bild.png"}}
);

        </script>

	</body>
</html>
